<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" v-model="data.search">
      <el-form-item label="任务组">
        <yu-select
          select
          :options="data.sysTaskGroup"
          v-model:value="data.search.groupId"
          lab="groupName"
          val="groupId"
        />
      </el-form-item>
      <el-form-item>
        <el-form-item label="任务名称">
          <el-input
            v-model="data.search.taskName"
            placeholder="任务名称"
          ></el-input>
        </el-form-item>

        <el-button type="primary" @click="querySysTask">查询</el-button>
      </el-form-item>
    </el-form>

    <yu-table
      ref="yuTable"
      :tableData="data.tableData"
      :columns="data.tableData.columns"
      @getSelectionRows="getSelectionRows"
    >
      <template #toolbar>
        <el-button-group class="ml-4">
          <el-button @click="addTask">新增</el-button>
          <el-button @click="delBatch">删除</el-button>
        </el-button-group>
      </template>
      <template v-slot:taskStatus="{ scopeData }">
        <el-switch
          v-model="scopeData.row.taskStatus"
          class="tablescope"
          @change="
            changeIsRun(
              scopeData.row.taskStatus,
              scopeData.row,
              scopeData.row.rowIndex - 1
            )
          "
          active-value="1"
          inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </template>
      <template v-slot:handleSlot="{ scopeData }">
        <el-button-group v-for="item in data.buttons" class="buttons">
          <el-tooltip placement="bottom" effect="dark">
            <template #content> {{ item.name }}</template>
            <el-button
              text
              size="small"
              @click="
                handle(item.type, scopeData.row, scopeData.row.rowIndex - 1)
              "
            >
              <yu-icon :iconName="item.icon" />
            </el-button>
          </el-tooltip>
        </el-button-group>
      </template>
    </yu-table>
    <yu-dialog :data="data.dialogConfig" v-model:isShow="data.isShow">
      <task-edit :editData="data.editData"></task-edit>
    </yu-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import TaskEdit from './TaskEdit.vue';
const { proxy } = getCurrentInstance();
const data = reactive({
  search: {},
  sysTaskGroup: [],
  tableData: { data: [], columns: [], tableArrts: { haspage: true } },
  editData: {},
  dialogConfig: {},
  isShow: false,
  buttons: [],
});
const addTask = () => {
  data.dialogConfig.title = '新增';
  data.isShow = true;
  data.editData = {};
};
onMounted(() => {
  //菜单查询
  getSysTaskGroup();
});
const getSysTaskGroup = async () => {
  data.sysTaskGroup = await proxy.$api.system.getSysTaskGroupDict();
};
const querySysTask = async () => {
  data.tableData.data = await proxy.$api.system.querySysTask(data.search);
};
data.tableData.columns = [
  { title: '任务', key: 'taskName', width: 120, tooltip: true },
  { title: '任务组名', key: 'groupId', align: 'center' },
  { title: '执行表达式', key: 'taskCron', tooltip: true },
  { title: '调用类型', key: 'taskType', tooltip: true },
  { title: '执行状态', key: 'taskStatus', slot: 'taskStatus', tooltip: true },
  { title: '操作', slot: 'handleSlot', width: 280 },
];
data.buttons = [
  { name: '编辑', icon: 'xiugai', type: 'edit' },
  { name: '删除', icon: 'shanchu', type: 'del' },
  { name: '运行一次', icon: 'ceshi1', type: 'one' },
  { name: '任务详情', icon: 'renwuxiangqing', type: 'detail' },
  { name: '调度日志', icon: 'ziyuanxhdpi', type: 'rizhi' },
];
const handle = (type, row, rowIndex) => {
  switch (type) {
    case 'edit':
      edit(row, rowIndex);
      break;
    case 'start':
      start(row, rowIndex);
      break;
  }
};
//编辑
const edit = (row, rowIndex) => {
  data.dialogConfig.title = '新增';
  data.isShow = true;
  data.editData = row;
};
//启动 start
const start = (row, rowIndex) => {
  proxy.$api.system.startSysTask(row).then(res => {
    if (res.code != -1) {
      proxy.$message({
        type: 'success',
        message: res.msg,
      });
    } else {
      // 关闭对话框
      proxy.$message({
        type: 'success',
        message: res,
      });
    }
  });
};
const stop = (row, rowIndex) => {
  proxy.$api.system.stopSysTask(row).then(res => {
    if (res.code != -1) {
      proxy.$message({
        type: 'success',
        message: res.msg,
      });
    } else {
      // 关闭对话框
      proxy.$message({
        type: 'success',
        message: res,
      });
    }
  });
};
const changeIsRun = (taskStatus, row, rowIndex) => {
  switch (taskStatus) {
    case '1':
      start(row, rowIndex);
      break;
    case '0':
      stop(row, rowIndex);
      break;
  }
};
//停止
</script>

<style lang="scss" scoped>
.buttons {
  .svg-icon {
    padding-right: 5px;
    font-size: 16px;
  }
  .el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, #b2e68d, #bce689);
    right: 0;
  }
}
</style>
